<template>
  <view class="hs-tab">
    <!-- :autoplay="true" -->
    <swiper
      class="hs-tab-swiper"
      circular
      :autoplay="isAutoplay"
      :interval="5000"
      :duration="100"
      @transition="swiperTransition"
      @animationfinish="animationfinish"
    >
      <swiper-item v-for="(item, index) in menuList" :key="index">
        <image :src="item.bannerUrl" mode="aspectFill" />
      </swiper-item>
    </swiper>
    <!-- 滑块0 -->
    <view v-if="sliderBool == 0" class="slider-container">
      <view
        class="slider-item"
        :style="{ width: sliderHighWidth + 'px', left: sliderLeft + 'px' }"
      >
      </view>
    </view>
    <!-- 滑块1 -->
    <view class="slider-container-1" v-if="sliderBool == 1">
      <view
        class="slider-item"
        :class="current + 1 == i ? 'active' : ''"
        v-for="i in menuList.length"
        :key="i"
      >
      </view>
    </view>
  </view>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  getCurrentInstance,
} from "vue";

export default defineComponent({
  name: "hstab004",
  props: {},
  components: {},
  setup() {
    const data = reactive({
      isAutoplay: true, //在sliderBool为1情况下生效
      sliderBool: 1, //轮播点位样式 0 or 1
      contentScrollW: 0, // 滚动元素宽度
      sliderHighWidth: 0, //高亮滑块的宽度
      current: 0,
      sliderLeft: 0, //滑动过程中滑块的left
      endSliderLeft: 0, //滑动结束后的滑块left
      menuList: [
        {
          bannerUrl: "/static/dataImage/banner/ppmtBanner001.jpg",
        },
        {
          bannerUrl: "/static/dataImage/banner/ppmtBanner002.jpg",
        },
        {
          bannerUrl: "/static/dataImage/banner/ppmtBanner003.jpg",
        },
        {
          bannerUrl: "/static/dataImage/banner/ppmtBanner004.jpg",
        },
      ],
    });
    onMounted(() => {
      if (data.sliderBool == 0) {
        data.isAutoplay = false;
      }
      if (data.sliderBool == 0 && !data.isAutoplay) {
        getScrollinfo();
        setSliderHighSize();
      }
    });
    // 获取滚动元素信息
    const { proxy } = getCurrentInstance();

    // 获取滚动元素信息
    const getScrollinfo = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .select(".hs-tab-swiper")
        .boundingClientRect((ele) => {
          // 拿到 scroll-view 组件宽度,计算滑动的最大值
          data.contentScrollW = ele.width;
        })
        .exec();
    };
    // 获取滑块容器宽度，设置高亮滑块宽度
    const setSliderHighSize = () => {
      const query = uni.createSelectorQuery().in(proxy);
      query
        .select(".slider-container")
        .boundingClientRect((ele) => {
          if (!ele) return;
          data.sliderHighWidth = ele.width / data.menuList.length;
        })
        .exec();
    };
    // 轮播滑动时，计算滑动方向，和高度改变
    const swiperTransition = (e) => {
      const currentDx = e.detail.dx; //横向滚动距离,正值向右，负值向左
      let currentIndex = data.current;
      const dataLen = data.menuList.length;
      //计算比例#### 计算横向滑动宽度和总宽度的*比例*（转为绝对值，正值）
      const wProportion = Math.abs(currentDx / data.contentScrollW);
      if (wProportion > 1) return;
      if (currentDx > 0) {
        // 向右滑动
        currentIndex += 1;
        if (currentIndex >= dataLen) {
          currentIndex = 0;
        }
      } else {
        // 向左滑动
        currentIndex -= 1;
        if (currentIndex < 0) {
          currentIndex = dataLen - 1;
        }
      }

      //   以下是计算滑块的过度动
      //  计算滑块下标差，小于零向左划，大于零向右划
      const sliderIndex = data.current - currentIndex;
      //   计算移动的距离
      const leftMovePx =
        data.sliderHighWidth * wProportion * Math.abs(sliderIndex);
      //   根据sliderIndex判断左右left增加或减少
      if (sliderIndex < 0) {
        data.sliderLeft = data.endSliderLeft + leftMovePx;
      } else {
        data.sliderLeft = data.endSliderLeft - leftMovePx;
      }
    };
    const animationfinish = (e) => {
      data.current = e.detail.current;
      data.endSliderLeft = data.sliderLeft;
    };
    return {
      swiperTransition,
      animationfinish,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.hs-tab {
  position: relative;
  height: 240rpx;
  border-radius: 10rpx;
  overflow: hidden;
  //   background: #fff;
  .hs-tab-swiper {
    height: 100%;
    position: relative;
    image {
      position: absolute;
      top: -130rpx;
      width: 100%;
    }
  }
  .slider-container {
    position: absolute;
    bottom: 12rpx;
    left: 50%;
    height: 8rpx;
    transform: translateX(-50%);
    width: 70rpx;
    display: flex;
    border-radius: 3rpx;
    background: #eee;
    .slider-item {
      position: absolute;
      left: 0;
      height: 100%;
      background: #ff7b00;
      border-radius: 3rpx;
    }
  }
  .slider-container-1 {
    position: absolute;
    bottom: 12rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    .slider-item {
      height: 8rpx;
      width: 6rpx;
      margin: 0 4rpx;
      background: #dddddd;
      border-radius: 3rpx;
      transition: 0.3s;
      &.active {
        background: #ff7b00;
        width: 20rpx;
        margin: 0;
      }
    }
  }
}
</style>
